<template>
  <div v-if="shipinflag" style="width: 500px;height: 300px" class="shipinl">
    <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" />
    <div class="fost" @click="fnnn">X</div>
  </div>
</template>
<script>
import Vue from 'vue'
import vueMiniPlayer from 'vue-mini-player'
import 'vue-mini-player/lib/vue-mini-player.css'
Vue.use(vueMiniPlayer)
export default {
  data() {
    return {
      shipinflag: false,
      video: {
        // 视频播放源
        url: '',
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: 'auto', // 视频预加载
        poster: '', // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false // 视频自动播放
      }
    }
  },
  // computed:{
  //   video(){
  //     return this.$refs.vueMiniPlayer.$video;
  //   }
  // },
  methods: {
    fnnn() {
this.$emit('closethis')
    }
  }
}
</script>
<style>
.shipinl{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.fost{
  font-size: 25px;
  background: gray;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius:50% ;
  color: white;
  position: absolute;
  left: 101%;
  top: -10%;
  cursor: pointer;
}
</style>
